<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
<!-- 
    vue中有两种数据绑定的方式
    单向绑定：v-bind   数据只能从data流向页面
    双向绑定：v-model  数据不仅能从data流向页面，还可以从页面流向data
    备注：双向绑定一般都应用于表单类元素上，如input  select
        v-model：value可以简写成v-model，因为v-model默认收集的就是value值 -->
        <div class="root">
        单项数据绑定：<input type="" :value="name">
        双项数据绑定：<input type="" v-model:value="name">
        双项数据绑定：<input type="" v-model="name">

    
     <!-- v-model只能应用在表单类元素上（输入类元素上） -->
     <h2 v-model:x="name">你好</h2>

   
    </div>

    
</body>

<script>
    new Vue({
        el:".root",
        data:{
            name:"张三"
        }
    })

</script>
</html>